<template>
  <div class="document-container">
    <el-row>
      <el-col :span="7">
        <div class="document-nav">
          <!-- 搜索+创建 -->
          <div class="nav-search">
            <el-row :gutter="5">
              <el-col :span="21">
                <el-input size="small" placeholder="请输入文件名" suffix-icon="Search"/>
              </el-col>
              <el-col :span="3">
                <el-button type="info" icon="Plus" size="small"  bg/>
              </el-col>
            </el-row>
          </div>
          <!-- 目录列表 -->
          <div class="nav-list">

          </div>
        </div>
      </el-col>
      <el-col :span="17"></el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>

</script>

<style lang="scss">
 .document-container {
   padding: 18px 0;

   .document-nav {
     padding: 0 5px;
     height: calc(100vh - 18px);
     border-right: 1px solid #f3eded;

     .nav-search {
       height: 35px;
       line-height: 35px;

       .el-button {
         padding: 5px !important;
         background-color: #cacdd5 !important;
         border: none;
       }

     }

     .nav-list {
       height: calc(100vh - 45px);
       background: #2b85e4;
     }
   }
 }
</style>